<!-- ContentVideo.vue -->
<template>
    <div class="video-block">
      <video 
        controls
        :poster="block.cover"
        class="video-player"
      >
        <source :src="block.url" :type="videoType" />
        您的浏览器不支持视频播放
      </video>
      <div class="video-meta">
        <span class="duration">{{ duration }}</span>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    block: {
      type: Object,
      required: true,
      validator: (b) => !!b.url && b.type === 'video'
    }
  })
  
  const videoType = computed(() => {
    const ext = props.block.url.split('.').pop()
    return `video/${ext === 'mp4' ? 'mp4' : 'webm'}`
  })
  
  const duration = computed(() => {
    if (!props.block.duration) return ''
    const mins = Math.floor(props.block.duration / 60)
    const secs = props.block.duration % 60
    return `${mins}:${secs.toString().padStart(2, '0')}`
  })
  </script>
  
  <style scoped>
  .video-block {
    position: relative;
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .video-player {
    width: 100%;
    max-height: 600px;
    background: #000;
  }
  
  .video-meta {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
  }
  </style>